<template>
  <s-layout class="set-wrap" title="我要开店" :bgStyle="{ color: '#f7f7f7' }">
    <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无常见问题" icon="/static/collect-empty.png" />

    <view class="flex flex-col p-4 pb-0 bg-white">
      <view class="flex gap-1 items-center">
        <image src="/static/18714693341.png" class="size-6" mode="scaleToFill" />
        <view class="text-[1rem] text-[#333333]">经营者信息</view>
      </view>
      <view class="flex overflow-hidden flex-col bg-white rounded-lg">
        <view class="flex gap-7 items-center py-2">
          <view class="text-[.9375rem] text-[#333333] flex-none"> 店铺名称 </view>
          <uni-easyinput
            v-model="state.name"
            placeholder="请填写店铺名称"
            type="text"
            :inputBorder="false"
            maxlength="3"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          >
          </uni-easyinput>
        </view>
        <u-line></u-line>
        <view class="flex relative gap-7 items-center py-2">
          <view class="size-full absolute inset-0 z-50" @click="openArea"></view>
          <view class="text-[.9375rem] text-[#333333] flex-none"> 所属区域 </view>

          <uni-easyinput
            v-model="state.region"
            type="text"
            placeholder="请选择所属区域"
            :inputBorder="false"
            disabled
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            :styles="{ disableColor: '#fff', color: '#333' }"
          >
            <template #right>
              <u-icon name="arrow-right"></u-icon>
            </template>
          </uni-easyinput>
        </view>
        <u-line></u-line>
        <view class="flex relative gap-7 items-center py-2">
          <!-- <view class="size-full absolute inset-0 z-50" @click="handleAddress"></view> -->

          <view class="text-[.9375rem] text-[#333333] flex-none"> 详细地址 </view>

          <uni-easyinput
            v-model="state.address"
            placeholder="请填写详细地址"
            type="text"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          ></uni-easyinput>
        </view>
        <u-line></u-line>
        <view class="flex gap-7 items-center py-2">
          <view class="text-[.9375rem] text-[#333333] flex-none"> 法人代表 </view>
          <uni-easyinput v-model="state.frname" placeholder="请填写法人代表" type="text" :inputBorder="false"> </uni-easyinput>
        </view>
        <u-line></u-line>
        <view class="flex gap-7 items-center py-2">
          <view class="text-[.9375rem] text-[#333333] flex-none"> 联系电话 </view>

          <uni-easyinput
            v-model="state.mobile"
            placeholder="请填写联系电话"
            type="text"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          >
          </uni-easyinput>
        </view>
        <u-line></u-line>
        <view class="flex flex-col gap-4 py-4">
          <view class="text-[.9375rem] text-[#333333] flex-none"> 营业执照 </view>
          <s-uploader
            v-model:url="state.license_image"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          ></s-uploader>
        </view>
        <view class="item-content flex gap-4 pb-4" v-if="state.hz_price">
          <view class="text-[.9375rem] text-[#FF1515] flex-none"> 服务费 </view>
          <view class="text-[.9375rem] text-[#FF1515] flex-none"> {{ state.hz_price }}元 </view>
        </view>
        <view class="flex items-center pb-4">
          <u-checkbox-group @change="checkboxGroupChange">
            <u-checkbox v-model="state.checked" shape="circle"></u-checkbox>
          </u-checkbox-group>
          <view class="text-[13px] text-[#616161] flex items-center">
            我已阅读并同意相关条款
            <view class="text-[#FF1515]" @click="toUserAgreement"> 《线上开店》 </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 选择区域 -->
    <su-region-picker :show="state.regionShow" @cancel="state.regionShow = false" @confirm="onRegionConfirm"> </su-region-picker>
    <!-- <u-picker :show="state.regionShow" :columns="state.regionalData"></u-picker> -->

    <view class="py-5"></view>
    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white">
      <view class="overflow-hidden py-3 w-full rounded-lg bg-[#0788C8] grid place-items-center" @click="submitApplication">
        <view class="font-medium text-[1rem] text-[#FFFFFF]"> 申请开店 </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    regionShow: false,
    regionalData: [],
    list: [],
    loading: true,
    name: '', // 店铺名称
    province: '', // 省
    city: '', // 市
    district: '', // 区县
    address: '', // 详细地址
    frname: '', // 法人代表
    mobile: '', // 联系电话
    license_image: '', // 营业执照图片
    checked: true,
    // 区域
    region: '',
    hz_price: '', // 手续费
  });
  // 判断 isdev

  // if (process.env.NODE_ENV == 'development') {
  //   state.value.name = '测试店铺';
  //   state.value.region = '四川省峨眉山市峨眉山风景区';
  //   state.value.address = '四川省峨眉山市峨眉山风景区';
  //   state.value.frname = '测试法人';
  //   state.value.mobile = '18599996666';
  //   state.value.license_image = '';
  //   state.value.checked = true;
  // }

  //----------------
  shopApplyInfo();
  function shopApplyInfo() {
    sheep.$api.yy.shopApplyInfo().then((res) => {
      state.value.hz_price = res.data.hz_price;
    });
  }
  function submitApplication() {
    // if (!state.value.checked) {
    //   uni.showToast({
    //     title: '请阅读并同意相关条款',
    //     icon: 'none',
    //   });
    //   return;
    // }
    if (state.value.name.length !== 3) {
      uni.showToast({
        title: '店铺名称长度不够',
        icon: 'none',
      });
      return;
    }

    // 提交表单数据
    const params = {
      name: state.value.name,
      province: state.value.province,
      city: state.value.city,
      district: state.value.district,
      address: state.value.address,
      frname: state.value.frname,
      mobile: state.value.mobile,
      license_image: state.value.license_image,
    };

    // TODO: 调用接口提交数据
    console.log('提交的数据:', params);
    sheep.$api.yy.shopApply(params).then((res) => {
      if (res.code === 1) {
        if (res.data.is_pay) {
          uni.navigateTo({
            url: '/pages/pay/indexs?orderSN=' + res.data.order.order_sn + '&type=recharge',
          });
        } else {
        }
        // // 返回
        // // 清空表单数据
        // state.value.name = '';
        // state.value.province = '';
        // state.value.city = '';
        // state.value.district = '';
        // state.value.address = '';
        // state.value.frname = '';
        // state.value.mobile = '';
        // state.value.license_image = '';
        // state.value.checked = false;
        // state.value.region = '';
        // setTimeout(() => {
        //   uni.navigateBack();
        // }, 1000);
      }
    });
  }
  function onRegionConfirm(e) {
    console.log('e==> ', e);
    state.value.province = e.province_name;
    state.value.city = e.city_name;
    state.value.district = e.district_name;
    state.value.regionShow = false;
    state.value.region = [e.province_name, e.city_name, e.district_name].join('-');
  }
  function checkboxGroupChange() {
    state.value.checked = !state.value.checked;
  }
  function toUserAgreement() {
    uni.navigateTo({
      url: '/pages/public/richtext?id=1&title=线上开店',
    });
  }
  function openArea() {
    state.value.regionShow = true;
  }
  function handleAddress() {
    uni.chooseLocation({
      success__: function (res) {
        console.log('位置名称：' + res.name);
        console.log('详细地址：' + res.address);
        console.log('纬度：' + res.latitude);
        console.log('经度：' + res.longitude);
        state.value.address = res.address;
      },
    });
  }
</script>

<style lang="scss" scoped>
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-easyinput__content-input {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      padding-left: 0 !important;
    }

    .uni-easyinput__content-textarea {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      margin-top: 8rpx !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-textarea-icon {
      margin-top: 22rpx;
    }

    .is-disabled {
      color: #333333;
    }
  }
</style>
